<template>
	<view>
		<view class="daily-inspection-details">
			<!-- 头部header -->
			<view class="header">
				<uni-nav-bar :statusBar="true" :boole="boole" @requestHttp='requestHttp' leftIcon="arrowleft" fixed="true" title="清单记录详情" @clickLeft="clickLeft"></uni-nav-bar>
			</view>
			<!--页面内容-->
			<view class="p-content">
				<!-- 检查项信息 -->
				<view class="inspection-item-wrap">
					<view class="inspection-item">
						<checkbox-group @change="changeDayInspectFlag(inspectionInfo)" class="checkbox-wrap">
							<checkbox class="custom-checkbox-style" v-if="boole" :checked="inspectionInfo.dayInspectFlag"></checkbox>
							<checkbox class="custom-checkbox-style" v-else disabled="false" :checked="inspectionInfo.dayInspectFlag"></checkbox>
						</checkbox-group>
						<view class="item-content-wrap">
							<view class="order-wrap">{{inspectionInfo.order}}.&nbsp;</view>
							<view class="inspection-content">{{inspectionInfo.inspectContent}}</view>
						</view>
					</view>
				</view>
				<!-- 备注内容 -->
				<view class="dispose-content-text">
					<textarea class="textarea-box" v-if="boole" placeholder="备注" maxlength="200" v-model="inspectionInfo.remark"
					 @input="contentInput">
						</textarea>
					<textarea class="textarea-box" v-else disabled='false' placeholder="备注" maxlength="200" v-model="inspectionInfo.remark"
					 @input="contentInput">
		                </textarea>
					<!--  <view class="word-limit">{{contentNum}}/200</view>-->
				</view>
				<!-- 只传一张图片列表显示图片 -->
				<view class="content-img-wrap" v-if="fileIdLength">
					<view class="img-item" v-for="(img, index) in inspectionInfo.fileId">
						000000000000000000000000000000000000
						<img v-lazy="imgHeaderUrl + img" @click="toCheckLarger(imgHeaderUrl + img)">
						<span class="img-item-del" @click="removeFileId(index)">×</span>
					</view>
				</view>
				<!-- 上传图片 -->
				<view class="dispose-content-img">
					<view class="personal-post-imgs clearfix">
						<view class="personal-post-imgs-item" v-for="(img,index) in imgList">
							<img class="" :src="img.imgSrc">
							<span class="personal-post-imgs-item-del" @click="removeImg(index)">×</span>
						</view>
						<view @click="addImgClick" class="personal-post-imgs-item" v-if="!fileIdLength && !imgListLength">
							<img :src="require(`../../../static/img/dailyInspectionList/00.png`)">
						</view>
					</view>
					<!-- <input ref="imgFile" type="file" multiple="multiple" @change="getFileUrl" accept="image/*" capture="camera" style="visibility: hidden;cursor:pointer"> -->
					<!-- <mt-actionsheet :actions="actions" v-model="sheetVisible"></mt-actionsheet> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				headTitle: '清单记录详情',
				imgHeaderUrl: uni.getStorageSync('imgServerHost') + ':' + uni.getStorageSync('imgServerPort') + '/img/',
				inspectionInfo: {},
				tempInspectionInfo: {}, // 临时数据
				//
				// exceptionId: this.$route.query.exceptionId,
				content: '',
				contentNum: 0,
				imgList: [],
				sheetVisible: false,
				atList: [],
				actions: [],
				maxImgNum: 1,
				// 是否可以操作该页面
				boole: false
			}
		},
		onLoad() {
			let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
			let curParam = routes[routes.length - 1].options; //获取路由参数   
			console.log(curParam.bol)
			if (curParam.bol === "true") {
				this.boole = false
			} else {
				this.boole = true
			}
			console.log(typeof this.boole, this.boole)
			uni.getStorage({
				key: 'inspectionInfo',
				success: (e) => {
					this.inspectionInfo = JSON.parse(e.data)
					this.tempInspectionInfo = JSON.parse(JSON.stringify(this.inspectionInfo))
					console.log(this.tempInspectionInfo, '44444555')
					// this.initNativeCallback()
				}
			})




		},
		computed: {
			fileIdLength() {
				let result = null
				result = this.inspectionInfo.fileId ? this.inspectionInfo.fileId.length : 0
				return result
			},
			imgListLength() {
				let result = null
				result = this.imgList ? this.imgList.length : 0
				return result
			}
		},
		methods: {
			/**
			 * @description:提交
			 * @author: LinW
			 * @createDate: 2019-08-13 16:59
			 * @param: mod
			 * @return:
			 */
			requestHttp(inspectionInfo){
				console.log('03213213321.0456.01')
				this.submitDisposalTotal(this.inspectionInfo.fileId, 'checkbox')
			},
			/**
			 * @description: 删除图片
			 * @author: LinW
			 * @createDate: 2019-08-13 16:59
			 * @param: mod
			 * @return:
			 */
			removeImg(index) {
				this.imgList.splice(index, 1)
			},
			removeFileId(index) {
				this.inspectionInfo.fileId.splice(index, 1)
			},
			/**
			 * 从图片数组中抽取出已完成上传的FileId列表
			 * @param imgList
			 */
			getFileIdList(imgList) {
				let fileIdList = []
				for (let i = 0; i < imgList.length; i++) {
					if (imgList[i].fileId !== '') {
						fileIdList.push(imgList[i].fileId)
					}
				}
				return fileIdList
			},
			/**
			 * @description: 添加图片
			 * @author: LinW
			 * @createDate: 2019-08-13 17:00
			 * @param: mod
			 * @return:
			 */
			addImgClick() {
				if (this.boole) {
					console.log('进入相册了')
					if (this.imgList.length >= this.maxImgNum) {
						// this.$toast('只能选择' + this.maxImgNum + '张照片哦')
						console.log('之能选择一张照片哦')
						return
					}
					let params = {
						dayInspectFlag: '',
						remark: '',
						inspectItemId: '',
						fileId: ''
					}
					uni.chooseImage({
						count: 6, //默认9
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album', 'camera'], //从相册选择、摄像头
						success: function(res) {
							console.log(res)
							console.log(JSON.stringify(res.tempFilePaths));
							params
						}
					})
				}

			},
			/**
			 * @description: 定义原生交互的回调函数
			 * @author: LinW
			 * @createDate: 2019-08-13 17:09
			 * @param: mod
			 * @return:
			 */
			initNativeCallback() {
				window.takePhotoHandle = response => {
					response = JSON.parse(response)
					console.log('客户端拍照后的回调', response)
					let imgSrc = response.fileUrl
					response.imgSrc = imgSrc
					response.uploadId = 'upload_' + Math.random().toString(36).substr(2) // 上传标识id
					response.fileId = '' // 上传成功fileId才不为空
					this.imgList.push(response)
				}
				window.selectFileHandle = response => {
					response = JSON.parse(response)
					console.log('客户端选择图片后的回调', response)
					for (let i = 0; i < response.length; i++) {
						let imgSrc = response[i].fileUrl
						response[i].imgSrc = imgSrc
						response[i].uploadId = 'upload_' + Math.random().toString(36).substr(2) // 上传标识id
						response[i].fileId = '' // 上传成功fileId才不为空
					}
					this.imgList = this.imgList.concat(response)
				}
				window.selectedMemberHandle = response => {
					this.atList = JSON.parse(response)
				}
				window.uploadFileHandle = response => {
					let upload = JSON.parse(response)
					if (upload.state !== '1') {
						return
					}
					for (let i = 0; i < this.imgList.length; i++) {
						if (this.imgList[i].uploadId === upload.uploadId) {
							this.imgList[i].fileId = upload.fileId
							break
						}
					}
				}
			},
			/**
			 * @description: dispose.vue
			 * @author: LinW
			 * @createDate: 2019-08-13 15:55
			 * @param: mod
			 * @return:
			 */
			contentInput() {
				this.contentNum = this.content.length
			},
			/**
			 * @description: 返回上一页
			 * @author: LinW (xuebingchuan_20@163.com)
			 * @createDate: 2020-10-10 10:40
			 */
			clickLeft() {
				uni.navigateBack()
			},
			/**
			 * @description: 更改 checkbox 检查标识
			 * @author: LinW (evan_origin@163.com)
			 * @createDate: 2019-11-15 14:57
			 * @param: item 切换的对象
			 */
			changeDayInspectFlag(item) {
				console.log('更改 checkbox 检查标识 item', item)
				if(item.dayInspectFlag === '0') {
					this.inspectionInfo.dayInspectFlag = '1'
				} else {
					this.inspectionInfo.dayInspectFlag = '0'
				}
				this.submitDisposalTotal(item.fileId, 'checkbox')
			},
			/**
			 * @description: 提交 图片fileId和文字
			 * @author: LinW
			 * @createDate: 2019-08-20 19:56
			 * @param: mod
			 * @return:
			 */
			submitDisposalTotal(fileIdList, type) {
				let params = {
					dayInspectFlag: this.inspectionInfo.dayInspectFlag,
					remark: this.inspectionInfo.remark,
					inspectItemId: this.inspectionInfo.inspectItemId,
					fileId: fileIdList
				}
				console.log('params提交的数据:::', params)
				this.$request.ygstInspectMenuItemUpdate(params).then(res => {
					if (type === 'submit') {
						// this.$toast('提交成功!')
						window.history.go(-1)
					} else if (type === 'checkbox') {
						let tipsText = this.inspectionInfo.dayInspectFlag === 1 ? '检查成功' : '取消检查'
						uni.showToast({
						    title: tipsText,
						    duration: 2000
						});
					} else {
						return
					}
				}).catch(e => {
					// this.$toast(e.msg || e)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.inspection-item {
		display: flex;
		.checkbox-wrap {
			width: 50rpx;
		}
		.item-content-wrap {
			display: flex;
		}
	}
	.dispose-content-text {
		.textarea-box {
			width: 100%;
			border-top: 1px solid #CCCCCC;
			margin-top: 20rpx;
			margin-bottom: 20rpx;
		}
	}
</style>
